<template>
<ul>
    <li v-for="role in rolelist" :class="{'active':currRole==role.id}" @click="setFocus(role)">{{role.name}}</li>
</ul>
</template>
<script>
    import role from "@/api/systemManagement/role/index";
    import eventBus from "@/utils/eventBus";
    export default {
        name:"roleList",
        props:[],
        data() {
            return {
                rolelist:[],
                currRole:""
            };
        },
        created() {
            this.getList()
        },
        methods: {
            setFocus(row){
                if(this.currRole != row.id){
                    this.currRole=row.id
                    eventBus.$emit("role-menu",row);
                }
            },
            getList() {
                role.getRolesPermission().then(res => {
                      this.rolelist = res.data;
                      if(this.rolelist.length>0){
                        this.setFocus(this.rolelist[this.getCurrRoleIndex(this.$route.query.id)])
                      }
                    });
            },
            getCurrRoleIndex(id){
                var index = 0;
                if(id){
                    for(var i=0; i<this.rolelist.length; i++){
                        if(this.rolelist[i].id == this.currRole){
                            return i
                        }
                    }
                }
                return index
            }
        }
    };
</script>
<style lang="scss" scoped>
  li{
    cursor: pointer;
    padding: 0px 20px;
    font-size: 14px;
  }
  li:hover{
    background-color: #f5f7fa;
    color:var(--theme);
  }
  .active{
    background-color: var(--theme);
    color: #ffffff;
  }
</style>
